<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>			
		<title></title>
	</head>
	<body>
		<div id="app">
		    <scroll :on-reach-top="handleReachTop">
		        <card dis-hover v-for="(item, index) in list" :key="index" style="margin: 3px 0; border: none;">
		            <p style="float: right;">hehe{{item}}</p>
		        </card>
		    </scroll>
		</div>		
	</body>
	<script>
		var rows = 20;
		var vue =  new Vue({
			el: '#app',
			data(){
				return {
					list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
				}
			},
			methods: {
				handleReachTop() {
					return new Promise(resolve => {
						setTimeout(() => {
							const first = this.list[0];
							for (i = 1; i < 11; i++) {
								this.list.unshift(first - i);
							}
							resolve();
						}, window.rows)
					});
				}
			}
		})
	</script>
</html>
